<template>
  <div :class="['c-region', vertical, onlycity]" style="margin: 10px 0 10px 0;" >
    <div class="c-r-select c-region__item c-region__item--year" v-show="needyear==true">
      <label for="" class="c-r-select__label">属性年份
        <a-tooltip placement="bottom" style="margin-left: 5px;">
              <template slot="title"><span>录入该行政区划哪一年的属性</span></template>
              <a-icon type="question-circle" />
          </a-tooltip>
        </label>
      <a-select  v-model="$store.state.Select_Year" style="width: 120px" class="c-r-select__select" :showSearch="true"  :disabled="$store.state.Years.length<=0"  @select="select_year">
        <a-select-option :value="yr.year"  v-for="(yr ,index ) in $store.state.Years" :key="index">{{yr.year}}</a-select-option>
      </a-select>
    </div>
    <a-divider />
    <div class="c-r-select c-region__item c-region__item--province">
      <label for="" class="c-r-select__label">省/市/自治区</label>
      <a-select defaultValue="内蒙古自治区"  style="width: 120px" class="c-r-select__select">
        <a-select-option value="内蒙古自治区">内蒙古自治区</a-select-option>
      </a-select>
    </div>
    <div class="c-r-select c-region__item c-region__item--city">
      <label for="" class="c-r-select__label">地级市/州/盟</label>
      <a-select  defaultValue="--地级市/州/盟--"  v-model="level2Value" style="width: 120px" class="c-r-select__select" :showSearch="true" @select="select2event" :disabled="disable2">
        <a-select-option value="0">--地级市/州/盟--</a-select-option>
        <a-select-option :value="im2.properties.code"  v-for="(im2 ,index2 ) in level2" :key="index2">{{im2.properties.name}}</a-select-option>
      </a-select>
    </div>
    <div class="c-r-select c-region__item c-region__item--qu">
      <label for="" class="c-r-select__label">区/县/旗</label>
      <a-select defaultValue="--区/县/旗--" v-model="level3Value" style="width: 120px" class="c-r-select__select" :showSearch="true"  :disabled="disable3"  @select="select3event">
        <a-select-option value="0">--区/县/旗--</a-select-option>
        <a-select-option :value="im3.properties.code"  v-for="(im3 ,index3 ) in level3"  :key="index3">{{im3.properties.name}}</a-select-option>
      </a-select>
    </div>
    <div class="c-r-select c-region__item c-region__item--xiang">
      <label for="" class="c-r-select__label">乡/镇/苏木</label>
      <a-select defaultValue="--乡/镇/苏木--"  v-model="level4Value" style="width: 120px" class="c-r-select__select" :showSearch="true"  :disabled="disable4"  @select="select4event">
        <a-select-option value="0">--乡/镇/苏木--</a-select-option>
        <a-select-option :value="im4.properties.code"  v-for="(im4 ,index4 ) in level4"  :key="index4">{{im4.properties.name}}</a-select-option>
      </a-select>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['vertical','onlycity','needyear'],
    data() {
      return {
        level2:[],
        level2Value:'--地级市/州/盟--',
        codes3All:[],
        level3:[],
        level3Value:'--区/县/旗--',
        codes4All:[],
        level4:[],
        level4Value:'--乡/镇/苏木--',
        disable2:false,
        disable3:true,
        disable4:true,
        activeCode:150000000,
        activeName:'内蒙古自治区',

        old_year:0,
      }
    },
    watch:{
      // '$store.state.Select_Year':(_new,_old)=>{
      //   //刷新数据
      //   console.log("select_year",_new,_old,cite_name)
      // },
    },
    mounted() {
      console.log("xzqh_select mounted")
      this.initmenuajax();
      this.$Bus.$on('double_click', (code,level) => {
        if(level==1){
          let level1Values=this.level2.find((el)=>{
            return el.properties.code==code
          })
          if(level1Values){
            this.level2Value=level2Values.properties.name
          }
          else{
            this.level2Value='--地级市/州/盟--'
            
          }
          this.select2event(code);
        }
        else if(level==2){
          let level2Values=this.level2.find((el)=>{
            return el.properties.code==code
          })
          if(level2Values){
            this.level2Value=level2Values.properties.name
          }
          this.select2event(code);
        }
        else if(level==3){
          let level3Values=this.codes3All.find((el)=>{
            return el.properties.code==code
          })
          if(level3Values){
            this.level3Value=level3Values.properties.name
          }
          this.select3event(code);
        }
      })
    },
    methods: {
      select_year(value){
        this.initmenuajax();//年份改变后initmenuajax也需要改变
      },
      axios_get_level(level){
        return {
            service:'WFS',
            version:'1.1.0',
            request:'GetFeature',
            TYPENAME:`${this.$store.state.Geo_Layer_Name}`,
            outputFormat:'application/json',
            SRSNAME:'EPSG:3857',
            PROPERTYNAME:'name,code,precode,level',//geom
            FILTER:`<Filter><PropertyIsEqualTo><PropertyName>level</PropertyName><Literal>${level}</Literal></PropertyIsEqualTo></Filter>`,
          }
      },
      initmenuajax() {
        let p2=this.axios_get(this.$geoserver_wfs,this.axios_get_level(2))
        let p3=this.axios_get(this.$geoserver_wfs,this.axios_get_level(3))
        let p4=this.axios_get(this.$geoserver_wfs,this.axios_get_level(4))
        Promise.all([p2, p3, p4])
        .then((datas) => {
          this.level2=datas[0];
          this.codes3All=datas[1];
          this.codes4All=datas[2];
          this.select2event(this.activeCode);
        })
      },
      select2event(value){
        let regionid=150000000
        let level=2
        if(value>0){
          regionid=value;
          if(regionid==150000000){
            this.disable3=true;
            this.activeName='内蒙古自治区';
          }
          else{
            this.disable3=false;
            this.change_select_name(regionid,this.level2);
          }
          // this.disable3=true;
          this.disable4=true;
          this.change_select3(regionid);
          
        }
        else{
          this.disable3=true;
          this.disable4=true;
          this.activeName='内蒙古自治区';
          level=1;
        }
        this.level3Value='--区/县/旗--';
        this.level4Value='--乡/镇/苏木--';
        this.changeCode(regionid,level);
      },
      select3event(value){
        let regionid=this.level2Value
        let level=3
        if(value>0){
          regionid=value;
          this.disable4=false;
          this.change_select4(regionid);
          this.change_select_name(regionid,this.codes3All);
        }
        else{
          level=2
          this.disable4=true;
          this.change_select_name(regionid,this.level2);
        }
        this.level4Value='--乡/镇/苏木--';
        this.changeCode(regionid,level);
      },
      select4event(value){
        let regionid=this.level3Value
        let level=4
        if(value>0){
          regionid=value;
          this.change_select_name(regionid,this.codes4All);
        }
        else{
          level=3
          this.change_select_name(regionid,this.codes3All);
        }
        this.changeCode(regionid,level);
      },
      change_select3(regionid){
        this.level3=this.codes3All.filter((item)=>{
          return item.properties.precode==regionid
        })
      },
      change_select4(regionid){
        this.level4=this.codes4All.filter((item)=>{
          return item.properties.precode==regionid
        })
      },
      change_select_name(regionid,codesAll){
        let filter=codesAll.filter((item)=>{
          return item.properties.code==regionid
        })
        if(filter.length>0){
          this.activeName= filter[0].properties.name
        }
        else{
          this.activeName= "";
        }
      },
      get_select_precode(regionid,codesAll){
        let filter=codesAll.filter((item)=>{
          return item.properties.code==regionid
        })
        if(filter.length>0){
          return filter[0].properties.precode
        }
        else{
          return 0
        }
      },
      changeCode(code,level){
        let precode=150000000;
        if(level==2){
          precode=150000000
        }
        else if(level==3){
          precode=this.get_select_precode(code,this.codes3All)
        }
         else if(level==4){
          precode=this.get_select_precode(code,this.codes4All)
        }
        if(this.activeCode !=code ||this.old_year !=this.$store.state.Select_Year){
          this.$store.state.Select_Xzqh_properties={}
          this.GetPropFunc(code).then(databack=>{
              if (databack && databack.length > 0) {
                this.$store.state.Select_Xzqh_properties=databack[0]
              }
              this.$Bus.$emit('regionid_change',code,level,this.activeName,precode);
          });
          this.activeCode=code;
          this.old_year=this.$store.state.Select_Year
        }
      },
     },   
  }
</script>